<template>
  <div class="createNewAlubum">
    <el-dialog
      title="创建歌单"
      :visible.sync="dialogVisible"
      width="30%"
      :close-on-click-modal="false"
      @close="closeCreateAlbum"
    >
      <el-row type="flex" align="middle">
        <span style="width: 150px">输入歌单名称 :</span>
        <el-input
          type="text"
          placeholder="输入新建歌单标题"
          v-model="text"
          maxlength="20"
          show-word-limit
          :clearable="true"
        >
        </el-input>
      </el-row>
      <br />
      <el-row type="flex" align="middle">
        <el-switch
          v-model="value1"
          active-text="共享歌单"
          inactive-text="隐私歌单"
          active-color="#42c27c"
        >
        </el-switch>
      </el-row>
      <br />
      <el-row type="flex" class="btn" justify="center">
        <el-button type="success" @click="createAlbum">新建歌单</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { createAlbum } from "../../../../api/myMusicApi";
export default {
  name: "createNewAlubum",
  components: {},
  data() {
    return {
      dialogVisible: true,
      text: "",
      value1: true,
    };
  },
  created() {},
  methods: {
    closeCreateAlbum() {
      this.text = "";
      this.value1 = true;
      this.$emit("createNewAlbumCpmClose");
    },
    async createAlbum() {
      let result = await createAlbum(this.text);
      if (result.code === 200) {
        this.$message({
          type: "success",
          message: "创建歌单成功",
        });
        this.$emit("createNewAlbumCpmClose", true);
      }
    },
  },
  computed: {},
};
</script>

<style lang="less" scoped>
.createNewAlubum {
  .btn {
    /deep/ .el-button--success {
      background-color: @globalColor;
    }
  }
  /deep/ .el-switch__label.is-active {
    color: @globalColor;
  }
}
</style>